<template>
	<div class="setting-container">
		<!-- 设置对话框 -->
		<el-dialog 
			class="setting-dialog" 
			title="个人设置" 
			v-model="dialogVisible" 
			:before-close="onClose"
			width="720px"
			:append-to-body="true"
			:modal-append-to-body="true"
			:close-on-click-modal="true"
			destroy-on-close
			center>
			<el-row>
				<el-col :span="8">
					<div class="side-panel" style="text-align: center;line-height: 25px;">
						<div class="avatar-container">
							<file-upload class="avatar-uploader"
							:action="imageAction" 
							:showLoading="true"
							:maxSize="maxSize"  
							@success="onUploadSuccess"
							:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
								<div class="avatar-inner">
									<el-avatar
										:size="120"
										:src="userInfo.headImage"
										:fit="fit">
										<el-icon v-if="!userInfo.headImage"><UserFilled /></el-icon>
									</el-avatar>
									<div class="avatar-hover">
										<!-- <el-icon><Upload /></el-icon> -->
										<span>点击上方更换头像</span>
									</div>
								</div>
							</file-upload>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<el-form :model="userInfo" label-width="100px" :rules="rules" ref="settingForm" class="setting-form">
						<el-form-item label="ID">
							<el-input disabled v-model="userInfo.chatNo" autocomplete="off"></el-input>
						</el-form-item>
						
						<el-form-item prop="nickName" label="昵称">
							<el-input v-model="userInfo.nickName" autocomplete="off" placeholder="请输入您的昵称"></el-input>
						</el-form-item>
						
						<el-form-item label="性别">
							<el-radio-group v-model="userInfo.sex">
								<el-radio :label="0">男</el-radio>
								<el-radio :label="1">女</el-radio>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="个性签名">
							<el-input 
								type="textarea" 
								v-model="userInfo.signature" 
								:rows="3"
								placeholder="介绍一下自己吧..."
								maxlength="100"
								show-word-limit>
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onClose()">取 消</el-button>
					<el-button type="danger" @click="onSubmit()">保 存</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import FileUpload from "../common/FileUpload.vue";
	import { UserFilled, Upload, Plus } from '@element-plus/icons-vue';
	
	export default {
		name: "settings",
		components: {
			FileUpload,
			UserFilled,
			Upload,
			Plus
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				userInfo: {},
				maxSize: 5*1024*1024,
				action: "/image/upload",
				fit: 'cover',
				rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			onClose() {
				this.dialogVisible = false;
			},
			onSubmit() {
				this.$refs['settingForm'].validate((valid) => {
					if (!valid) {
						return false;
					}
					this.$http({
						url: "/user/update",
						method: "put",
						data: this.userInfo
					}).then(()=>{
						this.$store.commit("setUserInfo",this.userInfo);
						this.$emit("close");
						this.$message.success("修改成功");
					})	
				});
			},
			onUploadSuccess(data, file) {
				this.userInfo.headImage = data.originUrl;
				this.userInfo.headImage = data.thumbUrl;
			}
		},
		computed: {
			dialogVisible: {
				get() {
					return this.visible;
				},
				set(value) {
					this.$emit('update:visible', value);
					if (!value) {
						this.$emit('close');
					}
				}
			},
			imageAction(){
				return `/image/upload`;
			}
		},
		watch: {
			visible: function(newData, oldData) {
				if(newData) {
					// 深拷贝
					let mine = this.$store.state.userStore.userInfo;
					this.userInfo = JSON.parse(JSON.stringify(mine));
				}
			}
		},
		mounted() {
			// 打开弹窗时禁止滚动
			document.body.style.overflow = 'hidden';
		},
		beforeDestroy() {
			// 关闭弹窗时恢复滚动
			document.body.style.overflow = '';
		}
	}
</script>

<style lang="scss">
	.setting-dialog {
		.el-dialog {
			border-radius: 12px;
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
			overflow: hidden;
			max-width: 98vw;
			margin: 0 auto !important;
			
			.el-dialog__header {
				padding: 28px 36px;
				margin: 0;
				border-bottom: 1px solid var(--el-border-color-lighter);
				background-color: var(--el-color-primary-light-9);
				
				.el-dialog__title {
					font-size: 22px;
					font-weight: 600;
					color: var(--el-color-primary);
				}
			}
			
			.el-dialog__body {
				padding: 36px;
				max-height: 70vh;
				overflow-y: auto;
			}
			
			.el-dialog__footer {
				padding: 24px 36px;
				border-top: 1px solid var(--el-border-color-lighter);
				background-color: var(--el-fill-color-lighter);
			}
		}
	}

	.setting-container {
		.side-panel {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-right: 20px;
		}
		
		.avatar-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			height: 100%;
			padding: 20px 0;
			
			.avatar-title {
				font-size: 16px;
				color: var(--el-text-color-secondary);
				margin-bottom: 16px;
			}
		}
		
		.avatar-uploader {
			cursor: pointer;
			position: relative;
			overflow: hidden;
			display: flex;
			justify-content: center;
			margin: 0 auto;
			
			.avatar-inner {
				position: relative;
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				
				&:hover {
					transform: scale(1.02);
					
					.avatar-hover {
						opacity: 1;
					}
				}
				
				.el-avatar {
					border: 2px solid var(--el-color-primary-light-5);
					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
					background-color: var(--el-color-primary-light-9);
					display: flex;
					align-items: center;
					justify-content: center;
					
					.el-icon {
						font-size: 48px;
						color: var(--el-color-primary);
					}
				}
			}
			
			.avatar-hover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
				opacity: 0;
				transition: opacity 0.3s ease;
				z-index: 2;
				
				.el-icon {
					font-size: 24px;
					margin-bottom: 8px;
				}
				
				span {
					font-size: 14px;
				}
			}
		}
		
		.setting-form {
			.el-form-item {
				margin-bottom: 24px;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.el-form-item__label {
					font-weight: 500;
					color: var(--el-text-color-primary);
					font-size: 16px;
				}
				
				.el-input__wrapper,
				.el-textarea__wrapper {
					box-shadow: 0 0 0 1px var(--el-border-color) inset;
					
					&:hover {
						box-shadow: 0 0 0 1px var(--el-color-primary-light-5) inset;
					}
					
					&.is-focus {
						box-shadow: 0 0 0 1px var(--el-color-primary) inset;
					}
				}

				.el-input__inner,
				.el-textarea__inner {
					font-size: 15px;
					padding: 8px 12px;
				}
			}
		}
		
		.dialog-footer {
			display: flex;
			justify-content: flex-end;
			
			.el-button {
				padding: 12px 24px;
				font-size: 15px;
			}
			
			.el-button + .el-button {
				margin-left: 24px;
			}
		}
	}
</style>
